<template>
      <!-- 分割符号 -->
  <!-- <div class="rt-ft">
    <el-row :gutter="60">
      <el-col :span="24">
        <div class="rt-flex-right">
          <el-button type="primary" @click="handleChangeStatus"
            >{{ currentStatus === "read" ? "编辑" : "取消编辑" }}
          </el-button>
          <el-button
            type="primary"
            @click="handleSubmit"
            v-if="currentStatus === 'edit'"
          >
             保存
          </el-button>
        </div>
      </el-col>
    </el-row>
  </div> -->
  <el-form
    ref="queryFormRef"
    :inline="true"
    :label-position="fieldOptions.labelPosition || 'right'"
    :label-width="fieldOptions.labelWidth || '100px'"
    :model="currentForm"
 
    class="rt-query"
    size="small"
  >
    <el-row
      v-for="(item, index) in fieldList"
      :key="'row' + index"
      :gutter="60"
    >
      <el-col
        v-for="(item1, index1) in item.children"
        :span="item1.span || 6"
        :offset="item1.offset || 0"
        :key="'col' + index1"
      >
        <el-form-item
          :label="item1.label + item1.labelSuffix || ''"
          :style="{ width: '100%' }"
          v-if="currentStatus === 'read'"
  
        >
          <div v-if="item1.formType === 'datetimerange'">
            <span>{{ currentForm[item1.field][0] || "" }}</span>
            <span class="datetimerange-mid-suffix">{{ item1.midSuffix }}</span>
            <span>{{ currentForm[item1.field][1] || "" }}</span>
          </div>
          <div v-else>{{ currentForm[item1.field] }}</div>
        </el-form-item>
        <el-form-item
          v-else
          :label="item1.label + item1.labelSuffix || ''"
          :style="{ width: '100%' }"
          :rules="item1.itemRules"
          :prop="item1.field"
        >
          <!-- 输入框 -->
          <el-input
            :style="{ width: '100%' }"
            v-if="item1.formType === 'text'"
            v-model="currentForm[item1.field]"
            :placeholder="item1.placeholder"
            clearable
          />
          <!-- 下拉 -->
          <el-select
            :style="{ width: '100%' }"
            v-else-if="item1.formType === 'select'"
            v-model="currentForm[item1.field]"
            clearable
            placeholder="Select"
          >
            <el-option
              v-for="opItem in item1.options"
              :key="opItem.value"
              :label="opItem.label"
              :value="opItem.value"
            />
          </el-select>
          <!-- 时间 -->
          <el-date-picker
            v-else-if="item1.formType === 'datetimerange'"
            v-model="currentForm[item1.field]"
            type="datetimerange"
            :start-placeholder="item1.startPlaceholder"
            :end-placeholder="item1.endPlaceholder"
          />
          <!-- 自定义插槽 -->
          <slot
            v-else-if="item1.formType === 'solt'"
            :name="item1.soltName"
          ></slot>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <!-- 展开关闭控制 -->
  <!-- 分割符号 -->
  <!-- <div class="rt-ft">

    <el-row :gutter="60">
      <el-col :span="24">
        <el-divider border-style="dashed" />
      </el-col>
    </el-row>
  </div> -->
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { defineExpose } from "vue";
import { deepClone } from "@/utils";
const emit = defineEmits();
const { proxy } = getCurrentInstance();

// 查询栏目的高度
const height = ref("auto");
const props = defineProps({
  fieldOptions: {
    type: Object,
  },
  fieldForm: {
    type: Object,
  },
  rules:{
    type: Object,
  },
  fieldList: {
    type: Array,
  },
  /**read 只读  edit 编辑   */
  status: {
    type: String,
    default: "read",
  },
});
const currentForm = ref({});

/**重置表单 */
function resetForm() {
  proxy.resetForm("queryFormRef");
}
/**验证表单 */
async function validateForm() {
 

  return await proxy.$refs.queryFormRef.validate(async (valid) => {
          if (valid) {
                  } else {
                  return false
            }
    })
  
 }

/**改变表单 */
function handleChangeStatus() {
  currentStatus.value = currentStatus.value == "read" ? "edit" : "read";
}
/**提交表单 */
function handleSubmit() {
   
  emit("submit", currentForm.value);
}

// 当前页面状态
const currentStatus = computed({
  get() {
    return props.status;
  },
  set(val) {
    emit("update:status", val);
  },
});

watch(
  () => props.fieldForm,
  (value) => {
    currentForm.value = deepClone(value);
  }
);

watch(
  () => currentStatus.value,
  (value) => {
    if (value === "read") {
      currentForm.value = deepClone(props.fieldForm);
    }
  }
);
/**点击展开触发高度变化 */
currentForm.value = deepClone(props.fieldForm);

defineExpose({
  resetForm,
  currentForm,
  validateForm
});
</script>

<style lang="scss" scoped>
.rt-query {
  padding: 10px 20px;
  overflow: hidden;
  transition: height 1s;
}

.rt-query-foot-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  .btn-box {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
  }
}
.rt-ft {
  padding: 0 20px;
  .rt-flex-right {
    display: flex;
    flex-direction: row;
    justify-content: end;
  }
}
/* 日期组件样式 */
.datetimerange-mid-suffix {
  padding: 0 5px;
}
</style>
